<template>
	<view>
		<image src="/static/serve/bg.png" class="bg" mode=""></image>
		<view class="">
			<plhead :height="headh"></plhead>
			<view class="top">
				<u-status-bar bgColor="#f8f8f8"></u-status-bar>
				<view class="head" :style="{height:headh}">
					<image src="/static/homey/title.png" class="head__title" mode=""></image>
					<image src="/static/jied/tbg.png" style="width: 293rpx;height: 23rpx;" mode=""></image>
				</view>
			</view>
		</view>
		<view class="con">
			<view class="searchbox">
				<view class="searchbox__addr">
					深圳市
				</view>
				<image src="/static/serve/down.png" class="searchbox__down" mode=""></image>
				<view class="searchbox__line">

				</view>
				<input type="text" placeholder="搜索" class="searchbox__inp" />
				<view class="searchbox__btn">
					搜索
				</view>
			</view>
			<view class="box"
				:style="{height: 'calc(100vh - 3rpx - 79rpx - 50px - 35rpx - '+$u.addUnit($u.getPx(headh) + $u.sys().statusBarHeight + $u.sys().safeAreaInsets.bottom,'px')+')'}">
				
				<scroll-view scroll-y="true" style="height: 100%;">
					<view class="cybox">
						<view class="u-flex u-flex-y-center">
							<view class="cybox__title">
								常用服务
							</view>
							<image src="/static/homey/sx.png" class="cybox__sx" mode=""></image>
							<view class="cybox__t">
								换一批
							</view>
						</view>
						<view class="u-flex u-flex-y-center u-flex-wrap" style="margin-top: 30rpx;">
							<view class="cybox__tab" v-for="(item,index) in servlist" :key="index">
								<image :src="'/static/homey/i'+index+'.png'" class="cybox__tab__icon" mode=""></image>
								<view class="cybox__tab__text u-line-1">
									{{item}}
								</view>
							</view>
						</view>
						<view class="cybox__footer">
							<view class="u-flex u-flex-xy-center" v-for="(item,index) in list1" :key="index" style="width: 25%;">
								<view class="cybox__footer__item">
									<image :src="'/static/homey/z'+index+'.png'" class="cybox__footer__item__icon" mode=""></image>
									<view class="cybox__footer__item__text">
										{{item}}
									</view>
								</view>
								<view class="cybox__footer__line" v-if="index<(list1.length-1)">
									
								</view>
							</view>
						</view>
					</view>
					<image src="/static/homey/yhq.png" class="yhq" mode=""></image>
					<view class="list">
						<view class="list__item" v-for="(item,index) in 9" :key="index">
							<image src="/static/logo.png" class="list__item__pic" mode=""></image>
							<view class="list__item__info">
								<view class="list__item__name">
									家用充电桩安装
								</view>
								<view class="u-flex u-flex-y-center u-flex-between" style="margin-bottom: 40rpx;">
									<view class="list__item__tag" :class="'tag'+index1" v-for="(item1,index1) in tag" :key="index1">
										{{item1}}
									</view>
								</view>
								<view class="u-flex u-flex-y-center u-flex-between">
									<view class="list__item__price">
										160.0
									</view>
									<view class="list__item__text">
										已服务20次
									</view>
								</view>
								<view class="list__item__oldprice">
									原价￥1000起
								</view>
								<view class="u-flex u-flex-xy-center">
									<u-button @click="navto('/pages/pro/creatorder')" icon="/static/homey/sd.png" :customStyle="{width:'254rpx',height:'68rpx',padding:0,fontSie:'30rpx',margin:0,}" shape='circle' color="#ff6934" text="立即下单"></u-button>
								</view>
								
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>


		<tabbar :current="0"></tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				headh: '103rpx',
				servlist:[
					'变压器维修',
					'变压器安装',
					'变配电站巡检',
					'智能电工+...',
					'空压机节能',
					'商用充电桩...',
					'用电分析报告',
					'智能电工服务', 
				],
				list1:[
					'价格透明',
					'专业服务',
					'售后保障',
					'专业团队',
				],
				tag:[
					'专业师傅',
					'专业团队',
					'服务保障',
				]
			};
		},
		onLoad() {
			uni.hideTabBar()
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	.head {
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		background-color: #f8f8f8;
		&__title {
			width: 134rpx;
			height: 32rpx;
			margin-right: 10rpx;
		}
	}

	.bg {
		width: 750rpx;
		height: 520rpx;
		position: fixed;
		top: 0;
		left: 0;

	}

	.con {
		padding: 3rpx 30rpx 0;

		.searchbox {
			height: 79rpx;
			background: #FEFEFE;
			border-radius: 37rpx 37rpx 37rpx 37rpx;
			display: flex;
			align-items: center;
			padding: 0 12rpx 0 39rpx;

			&__addr {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #1A1919;
				line-height: 28rpx;
				margin-right: 10rpx;
			}

			&__down {
				width: 16rpx;
				height: 13rpx;
			}

			&__line {
				width: 1rpx;
				height: 25rpx;
				background: #9F9F9F;
				opacity: 0.38;
				margin: 0 18rpx;
			}

			&__inp {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #979797;
				flex: 1;
			}

			&__btn {
				width: 108rpx;
				height: 58rpx;
				background: #07D57E;
				border-radius: 28rpx 28rpx 28rpx 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #FEFEFE;
				line-height: 28rpx;
			}
		}
	}

	.box {
		padding-top: 35rpx;
		
	}
	.cybox{
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 37rpx 0 0;
		overflow: hidden;
		&__title{
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 800;
			font-size: 30rpx;
			color: #030606;
			line-height: 30rpx;
			flex: 1;
			
			margin-left: 33rpx;
		}
		&__sx{
			width: 27rpx;
			height: 27rpx;
			margin-right: 10rpx;
		}
		&__t{
			width: 71rpx;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 800;
			font-size: 24rpx;
			color: #1AAD64;
			line-height: 24rpx;
			margin-right: 30rpx;
		}
		&__tab{
			width: 25%;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 48rpx;
			&__icon{
				width: 92rpx;
				height: 89rpx;
				margin-bottom: 20rpx;
			}
			&__text{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 26rpx;
				color: #4E4E4E;
				line-height: 26rpx;
				width: 160rpx;
				text-align: center;
			}
		}
		&__footer{
			height: 66rpx;
			background: #EEFFEE;
			padding: 0 20rpx;
			display: flex;
			align-items: center;
			&__item{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 66rpx;
				&__icon{
					width: 24rpx;
					height: 24rpx;
					margin-right: 10rpx;
				}
				&__text{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 22rpx;
					color: #181D1B;
					line-height: 22rpx;
				}
			}
			&__line{
				width: 3rpx;
				height: 17rpx;
				background-color: #c6e4ab;
			}
		}
	}
	.yhq{
		width: 100%;
		height: 149rpx;
		margin-top: 17rpx;
	}
	.list{
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		padding-bottom: 50rpx;
		&__item{
			width: 334rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			overflow: hidden;
			padding-bottom: 30rpx;
			margin-top: 24rpx;
			&__pic{
				width: 334rpx;
				height: 334rpx;
			}
			&__info{
				padding: 0 10rpx 0 20rpx;
				margin-top: -4px;
				background-color: #FFFFFF;
			}
			&__name{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 800;
				font-size: 30rpx;
				color: #2A2C2C;
				line-height: 30rpx;
				width: 294rpx;
				padding: 40rpx 0 20rpx 0;
			}
			&__tag{
				height: 30rpx;
				border-radius: 5rpx 5rpx 5rpx 5rpx;
				padding: 0 8rpx;
				font-size: 20rpx;
				
				line-height: 30rpx;
			}
			.tag0{
				color: #0AA85B;
				border: 1rpx solid #15CE80;
				background: rgba(21, 206, 128, .2);
			}
			.tag1{
				color: #4176F1;
				border: 1rpx solid #4176F1;
				background: rgba(65, 118, 241, .2);
			}
			.tag2{
				color: #ff8c18;
				border: 1rpx solid #FF7240;
				background: rgba(255, 140, 24, .2);
			}
			&__price{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 40rpx;
				color: #FD3C33;
				line-height:20rpx;
				&::before{
					content: "￥";
					font-size: 24rpx;
				}
				&::after{
					content: "起";
					font-size: 20rpx;
					margin-left: 4rpx;
				}
			}
			&__oldprice{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 22rpx;
				color: #777878;
				line-height: 35rpx;
				text-decoration-line: line-through;
				margin-bottom: 20rpx;
				margin-top: 16rpx;
			}
			&__text{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 22rpx;
				color: #777878;
				line-height: 22rpx;
			}
		}
	}
</style>